<template>
  <div class="list">
    <ul>
      <li v-for="(item, index) in listData" :key="index">
        <span v-if="orderly">{{ index + 1 }}</span
        >{{ item.text || item }}
      </li>
    </ul>
  </div>
</template>

<script lang='ts'>
export default {
  props: {
    listData: () => {
      return { default: [] };
    },
    orderly: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    console.log(this.data);
  },
};
</script>

<style lang='scss' scoped>
.list {
  padding: 10px 20px 20px;
  li {
    padding: 5px;
    span {
      display: inline-block;
      width: 15px;
      height: 15px;
      text-align: center;
      color: white;
      margin-right: 4px;
    }
    &:first-child {
      span {
        background: rgba(234, 152, 54, 1);
      }
    }
    &:nth-child(2) {
      span {
        background: rgba(95, 189, 65, 1);
      }
    }
    &:nth-child(3) {
      span {
        background: rgba(61, 170, 230, 1);
      }
    }
  }
}
</style>